<!DOCTYPE html>
<html xmlns:th="http://www.w3.org/1999/xhtml">
<head>
    <title th:text="${detail.name}">案例详情</title>
    <div th:include="components/header :: header"></div>
</head>
<body>


<div th:replace="components/nav :: nav"></div>

<div id="detail" class="container">
    <div class="swiper-container">
        <div class="swiper-wrapper">
            <div class="swiper-slide page1" th:style="'background-image: url('+${detail.banner2}+')'">
                <div class="fullbg">
                    <h2>Limit pragmatic</h2>
                    <h3>极限务实</h3>
                </div>
                <img src="/static/assets/common/respire.svg" alt="respire" class="respire">
            </div>
            <div class="swiper-slide page2 swiper-no-swiping">
                <div class="content" th:utext="${detail.richText}">

                    <!--<h1>极限务实</h1>-->
                    <!--<h2>沙龙策划</h2>-->
                    <!--<article>-->
                    <!--针对民宿、主题酒店、青旅客栈、农场农庄、美丽乡村、田园综合体、特色小镇、都市旅游项目 老街文创街区等文旅业态提供品牌推广、项目规划、活动策划、咨询管理、整合营销等一站式服务。-->
                    <!--</article>-->
                    <!--<img src="/static/assets/detail/bg1.png" alt="">-->
                </div>
                <div th:replace="components/footer :: footer"></div>

            </div>
        </div>
    </div>
</div>
<script type="text/javascript" src="/js/jquery.mousewheel.min.js"></script>
<script>
    var mySwiper = new Swiper('.swiper-container', {
        mode: 'vertical',
        //滚轮滑动
        mousewheelControl: true,
        //键盘滑动
        keyboardControl: true,
        noSwiping: true,
        slidesPerView: 'auto',
        // scrollContainer: true,
        cssWidthAndHeight: true,

    });
    if ($(window).width() < 768) {
        // mySwiper.destroy(false, true)
    }

    $('#detail').bind('mousewheel', function (event, delta) {
        if (delta < 0) {
            // if (mySwiper.activeIndex == 0) {
            //     mySwiper.swipeNext()
            // }
        }
        console.log(
            $(document).scrollTop()
        )
    })
</script>
</body>
</html>
